<!doctype html5>

<html>
  <head>
    <title>Riot.js Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        body { font-family: 'myriad pro', sans-serif; font-size: 20px; border: 0; }
        todo { display: block; max-width: 400px; margin: 5% auto; }
        form input { font-size: 100%; padding: .6em; border: 1px solid #ccc; border-radius: 3px; }
        button { background-color: #1FADC5; border: 1px solid rgba(0,0,0,.2); font-size: 100%; color: #fff; padding: .6em 1.2em; border-radius: 3em; cursor: pointer; margin: 0 .3em; outline: none; }
        button[disabled] { background-color: #ddd; color: #aaa; }
        ul { padding: 0; }
        li { list-style-type: none; padding: .2em 0; }
        .completed { text-decoration: line-through; color: #ccc; }
        label { cursor: pointer; }
    </style>
  </head>
  <body>
    <todo></todo>
    <script src="riot.2.0.0.min.js"></script>
    <script>
        var html = `
        <h3>{ props.title }</h3>
        <ul>
            <li each="{ items }">
                <label class="{ completed: done }">
                <input type="checkbox" __checked="{ done }" onclick="{ parent.toggle }"> { title } </label>
            </li>
        </ul>
        <form onsubmit="{ add }">
            <input name="input" onkeyup="{ edit }">
            <button __disabled="{ !text }">Add #{ items.length + 1 }</button>
        </form>
        `;
        riot.tag('todo', html, function(props) {
            this.disabled = true;
            this.items = props.items;
            this.edit = function(e) {
                this.text = e.target.value;
            }.bind(this);
            this.add = function(e) {
                if (this.text) {
                    this.items.push({ title: this.text });
                    this.text = this.input.value = '';
                }
            }.bind(this);
            this.toggle = function(e) {
                var item = e.item;
                item.done = !item.done;
                return true;
            }.bind(this);
        });
        riot.mount('todo', {
            title: 'I want to behave!',
            items: [
                { title: 'Avoid excessive coffeine', done: true },
                { title: 'Be less provocative' },
                { title: 'Be nice to people' }
            ]
        })
    </script>

  </body>

</html>
